<template>
    <section>
        <div class="tab-content">
            <h2>{{ type && list[type]['tit'] }}</h2>
            <div class="tab" v-if="type == 'images'||type == 'product' ">
                <span v-for="(val, key, index) in tabType" :key="index" @click="tab(key)" :class="{active: val}">
                    <i class="el-icon-s-data"></i> {{ key }}
                </span>
            </div>
        </div>
        <component :is="type && list[type]['com']" :data="data" @changeTab="tab"></component>
    </section>
</template>

<script>
    import Info from "@Decoration/Edit/Info"
    import Images from "@Decoration/Edit/Image"
    import Product from "@Decoration/Edit/Product"
    import Search from "@Decoration/Edit/Search"
    import Notice from "@Decoration/Edit/Notice"
    import Shop from "@Decoration/Edit/Shop"
    // Shop
    export default {
        name: 'EditForm',
        components: {
            Info,
            Images,
            Product,
            Search,
            Notice,
            Shop
        },
        props: {
            data: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                type: '',
                list: {
                    'info': {
                        tit: '页面信息',
                        com: 'Info'
                    },
                    'images': {
                        tit: '图片',
                        com: 'Images'
                    },
                    'banner': {
                        tit: '轮播图',
                        com: 'Images'
                    },
                    'product': {
                        tit: '商品',
                        com: 'Product'
                    },
                    'Search': {
                        name: '搜索框',
                        com: 'Search'
                    },
                    'Shop': {
                        name: '店铺信息',
                        com: 'Shop'
                    },
                    'Notice': {
                        name: '公告',
                        com: 'Notice'
                    },
                },
                tabType: {
                    1: true,
                    2: false,
                    3: false
                }
            }
        },
        mounted() {
            this.type = this.data.type
            // console.log(this.data.type,'this.data');
            if (this.data.tabType) {
                this.tab(this.data.tabType)
            }
        },
        methods: {
            tab(key) {
                for (let i in this.tabType) {
                    if (key == i) {
                        this.tabType[key] = true
                        this.$set(this.data, 'tabType', key)
                    } else {
                        this.tabType[i] = false
                    }
                }
            },
        }
    }
</script>

<style scoped lang="less">
    section {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .tab-content {
        padding: 0 15px;

        h2 {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }

        .tab {
            display: flex;
            justify-content: space-around;
            border: 1px solid #ddd;
            border-radius: 6px;

            span {
                width: 33.33%;
                text-align: center;
                font-size: 14px;
                color: #666;
                display: block;
                height: 36px;
                line-height: 36px;
                cursor: pointer;

                &.active {
                    color: #fff;
                    background: #409eff;
                    border-radius: 2px;
                }

                &:nth-of-type(2) {
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                }
            }
        }
    }
</style>